<template>
    <div class="menu" v-if="userInfo">
        <div class="top">
            <el-icon :size="18" class="citon">
                <Expand></Expand>
            </el-icon>
        </div>
        <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#304156"
            text-color="#fff"
            active-text-color="#409bff"
            router
            unique-opened
        >
            <el-menu-item index="/main/home">
                <el-icon>
                    <House></House>
                </el-icon>
                <span>首页</span>
            </el-menu-item>
            <el-sub-menu index="/main/member" v-if="userInfo.role>3">
                <template #title>
                    <el-icon>
                        <UserFilled></UserFilled>
                    </el-icon>
                    <span>教务管理</span>
                </template>
                <el-menu-item index="/main/member/member01">
                    <el-icon :size="18" class="citon">
                        <UserFilled></UserFilled>
                    </el-icon>
                    <span>教务添加</span>
                </el-menu-item>
                <el-menu-item index="/main/member/member02">
                    <el-icon :size="18" class="citon">
                        <UserFilled></UserFilled>
                    </el-icon>
                    <span>教务列表</span>
                </el-menu-item>
                <el-menu-item index="/main/member/member03">
                    <el-icon :size="18" class="citon">
                        <UserFilled></UserFilled>
                    </el-icon>
                    <span>数据分析</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2" v-if="userInfo.role>2">
                <template #title>
                    <el-icon>
                        <OfficeBuilding></OfficeBuilding>
                    </el-icon>
                    <span>教师管理</span>
                </template>
                <el-menu-item index="/main/academy/academy01">
                        <el-icon :size="18" class="citon">
                            <OfficeBuilding></OfficeBuilding>
                        </el-icon>
                        <span>教师添加</span>
                </el-menu-item>
                <el-menu-item index="/main/academy/academy02">
                    <el-icon :size="18" class="citon">
                        <OfficeBuilding></OfficeBuilding>
                    </el-icon>
                    <span>教师列表</span>
                </el-menu-item>
                <el-menu-item index="/main/academy/academy03">
                    <el-icon :size="18" class="citon">
                        <OfficeBuilding></OfficeBuilding>
                    </el-icon>
                    <span>数据分析</span>
                </el-menu-item>

            </el-sub-menu>
             <el-sub-menu index="9">
                <template #title>
                    <el-icon>
                        <User></User>
                    </el-icon>
                    <span>学生管理</span>
                </template>
                <el-menu-item index="/main/student/add">
                        <el-icon :size="18" class="citon">
                            <User></User>
                        </el-icon>
                        <span>学生添加</span>
                </el-menu-item>
                <el-menu-item index="/main/student/list">
                    <el-icon :size="18" class="citon">
                        <User></User>
                    </el-icon>
                    <span>学生列表</span>
                </el-menu-item>
             </el-sub-menu>
             <!-- 成绩模块在教师显示 -->
             <el-sub-menu index="19">
                <template #title>
                    <el-icon>
                        <List></List>
                    </el-icon>
                    <span>成绩管理</span>
                </template>
                <el-menu-item index="/main/score/add">
                        <el-icon :size="18" class="citon">
                            <List></List>
                        </el-icon>
                        <span>成绩添加</span>
                </el-menu-item>
                <el-menu-item index="/main/score/record">
                    <el-icon :size="18" class="citon">
                        <List></List>
                    </el-icon>
                    <span>数据分析</span>
                </el-menu-item>
             </el-sub-menu>
            <!-- 学生模块 -->
            <el-menu-item index="/main/performance" v-if="userInfo.role==1">
                <el-icon>
                    <Document></Document>
                </el-icon>
                <span>个人成绩</span>
            </el-menu-item>
            <el-menu-item index="/main/userInfo" v-if="userInfo.role==1">
                <el-icon>
                    <ChatDotSquare></ChatDotSquare>
                </el-icon>
                <span>个人信息</span>
            </el-menu-item>
            <!-- 个人中心 /main/mine-->
            <el-menu-item index="/main/mine" v-if="true">
                <el-icon>
                    <Grid></Grid>
                </el-icon>
                <span>个人中心</span>
            </el-menu-item>
      </el-menu>
    </div>
</template>
<script>
import {Expand,House,UserFilled,School,OfficeBuilding,Notebook,Checked,Document,ChatDotSquare,User,List,Grid} from "@element-plus/icons-vue"
import {useStore} from 'vuex'
import {reactive,toRefs,onMounted,ref,computed} from "vue"
export default {
    components:{
        Notebook,
        Expand,
        House,
        UserFilled,
        School,
        OfficeBuilding,
        Checked,
        Document,
        ChatDotSquare,
        User,
        List,
        Grid
    },
    setup(props) {
        const store=useStore()
        const userInfo=computed(()=>store.state.userInfo)
        return{
            userInfo
            }
    }
    
}
</script>
<style lang="scss" scoped>
.menu{
    .top{
        background: #4a5064;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        height: 25px;
    }
    .el-menu{
        // background: #304156;
        // color: #fff;
        // .el-menu-item ,
        // .el-sub-menu,
        // .el-menu-item
        // {
        //     color: #fff;
        //     background: #304156;
        //     span,.el-icon{
        //         color: #fff;
        //     }
        // }
    }
}
  
</style>